<!-- -->
<template>
  <div class="public">
    <el-card>
      <el-table :data="userData" style="width: 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column prop="username" label="用户名" width="180"></el-table-column>
        <el-table-column prop="auth" label="权限" style="width:50%">
          <template slot-scope="scope">
            <div class="box">
              <div v-for="(v,i) in scope.row.auth" :key="i">
                <span>{{userList.find(item =>item.auth === v ).name}}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="update(scope.row)">操作</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div class="dialog-box">
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(v,i) in userList" :key="i" :label="v.auth">{{v.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sure">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getAllUser, setUserAuth } from "../../api";
import List from "../../data/authority";
export default {
  // import引入到组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      userData: [],
      userList: List,
      dialogVisible: false,
      checkList: [],
      id: 0
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getList() {
      getAllUser().then(res => {
        this.userData = res.data.map(item => {
          return {
            ...item,
            auth: item.auth.split(",")
          };
        });
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 操作弹框
    setDialog() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 操作按钮
    update(row) {
      console.log(row.auth, row.id);
      this.checkList = row.auth;
      this.setDialog();
      this.id = row.id;
    },
    sure() {
      setUserAuth({ auth: this.checkList.join(), id: this.id }).then(res => {
        console.log(res);

        this.getList();
        location.replace(document.referrer);
      });

      this.setDialog();
    }
  },
  //生命周期 - 创建完成 (可以访问当前this实例)
  created() {
    this.getList();
  },
  //生命周期 - 挂载完成 (可以访问DOM元素)
  mounted() {}
};
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang='scss'  scoped>
.box {
  width: 100%;
  height: auto;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  span {
    margin-right: 20px;
  }
}
</style>
